<template>
  <div class="role-list">
    <el-input v-model="search" size="large" placeholder="搜索" style="width: 250px;"/>
  </div>

  <el-table :data="filterTableData" style="width: 100%" class="table">
    <el-table-column label="图片" prop="date" width="150px" align="center"/>
    <el-table-column label="角色名字" prop="name" width="200px" align="center"/>
    <el-table-column align="right">
    </el-table-column>
  </el-table>
  <el-pagination
      class="custom-pagination"
      :page-size="5"
      :pager-count="7"
      layout="prev, pager, next"
      :total="70"
      background
  />
</template>

<script setup>
import {ref, computed} from 'vue'

const search = ref('')
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Morgan',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)
</script>


<style>
.role-list {
  margin-top: 20px;
  margin-left: 0px;
}

.table {
  margin-top: 20px;
}

.custom-pagination {
  position: fixed;
  bottom: 20px; /* 距离底部20px */
  right: 20px;
}
</style>